<template>
   <lay-layout class="example">
    <lay-header>
      <div class="content">
        <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys1" >
        
        <div class="left">
  <lay-menu-item><img src="../assets/1111111.png" alt="" height="80px"></lay-menu-item>
      </div>
      <div class="right">
        <lay-menu-item>首页</lay-menu-item>
  <lay-menu-item>   <router-link to="/login">登录</router-link></lay-menu-item>
  <lay-menu-item><router-link to="../utilis/eckarts_open_class/echart/index.html">社区</router-link></lay-menu-item> 

      </div>
</lay-menu>
      </div>
       

    </lay-header>
    <lay-body>
<div class="banner">
        <!-- 轮播图 -->
        <lay-carousel v-model="active1" >
    <lay-carousel-item id="1">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;"><img src="../assets//10001.png" alt=""></div>
    </lay-carousel-item>
    <lay-carousel-item id="2">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;"><img src="../assets//10002.jpg" alt=""></div>
    </lay-carousel-item>
    <lay-carousel-item id="3">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;"><img src="../assets/10003.png" alt=""></div>
    </lay-carousel-item>
    <lay-carousel-item id="4">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;"><img src="../assets/10004.jpg" alt=""></div>
    </lay-carousel-item>
  </lay-carousel>
</div>

    </lay-body>
   
    <div class="fooster">
   <xiaoshuo-view></xiaoshuo-view>
    </div>
    <div class="personal">
     <div class="title">
      <h1>男频个性化推荐</h1>
      <h1>女频个性化推荐</h1>

     </div>
     <div class="personal-content">
        <div class="personal-left">
         <div class="left-tit" v-for="(item,index) in shuffledArray" :key="item">
          <h1>{{ index+1 }}</h1>
          <p @click="newid(item.id)">{{ item.name }}</p>
          <p>作者：{{ item.author }}</p>
         </div>
        </div>
        <div class="personal-right" >  
          <div class="left-tit" v-for="(item,index) in shuffledArray2" :key="item">
          <h1>{{ index+1 }}</h1>
          <p @click="newid(item.id)"> {{ item.name }}</p>
          <p>作者：{{ item.author }}</p>
         </div>    
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom" >
<img src="../assets/image.png" alt="">
    </div>

  <router-view></router-view>
  </lay-layout>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import XiaoshuoView from '@/components/XiaoshuoView.vue';
import { shuxianglou } from '@/api/article';
import { userstore } from '@/stores/userstore';
const user = userstore()
const router = useRouter()
const selectedKey = ref("5")
    const openKeys1 = ref(["7"])   
    const active1 = ref("1")

  const shuxianglouapi=async()=>{
  const res=  await shuxianglou()
  user.newdata=res
  }
// console.log(user.newdata,'www');

// 页面传参
const newid=(id)=>{
  console.log(id,'id');
  router.push({
    path:'/echart',
    query:{
      id:id
    }
  })
}


  shuxianglouapi()

      // 复制数组并进行乱序操作
      const shuffledArray = user.newdata.slice().sort(() => Math.random() - 0.5);
      const shuffledArray2 = user.newdata.slice(20,200).sort(() => Math.random()-0.5);


</script>


<style scoped lang="scss">
.example .layui-footer,
.example .layui-header {
  line-height: 60px;
  text-align: center;
  color: white;
}
.example .layui-side {
  display: flex;

  align-items: center;
  justify-content: center;
  color: white;
}
.example .layui-body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.content{
  width: 100%;
  height: 80px;
  margin: auto;
}
.layui-header{
  height: 80px;
}

/* 菜单 */
.layui-nav{
  padding: 0;
  background-color: rgb(255,113,29);
  position: relative;
  height: 80px;

}
.left{
  position: absolute;
  left: 0;
}
.right{
  position: absolute;
  right: 0;
  line-height: 80px;
  margin-right: 40px;
}
.right a:active{
  color: #f66e13;
}
.layui-nav li:active {
color: #19c235;
}

.layui-carousel{
  height: 600px !important;
  margin-top: 10px;


}
.layui-carousel img{
  width: 1200px;
  height: 600px;
  object-fit: cover;
  

}
.example .layui-body[data-v-8620aa60]{
  background: none;
}
.banner{
  width: 1200px;
  margin: auto;

}
.fooster{

}
.bottom{
  width: 100%;
  height: 230px;
  margin-top: 25px;
  background-color: rgb(241,241,241);
  

}
.bottom img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-top: 20px
  
}
.personal{
  width: 1200px;
  margin: auto;
  .title{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: -100px;
    h1{
      cursor: pointer;
    }
  }
  .personal-content{
    width: 1200px;
    margin: auto;
    overflow: hidden;
    .personal-left{
      float: left;
      width: 446px;
      height: 772px;
      background-repeat: no-repeat;
      border-radius: 20px;
   background: url('https://lf-cdn-tos.bytescm.com/obj/static/toutiao/muye/0d26bffe926e49c844284c9370eb85f0.png');
   .left-tit{
    display: flex;
margin-left: 50px;
margin-top: 17px;
h1{
  font-size: 25px;
}
p{
  cursor: pointer;
  margin-left: 30px;
  font-size: 20px;

}
   }
    }
    .personal-right{
      float: right;
      width: 446px;
      height: 772px;
      background-repeat: no-repeat;
      border-radius: 20px;
   background: url('	https://lf-cdn-tos.bytescm.com/obj/static/toutiao/muye/4690808c10dccb6d1476d0bbcb7f2ede.png');
   .left-tit{
    display: flex;
margin-left: 50px;
margin-top: 17px;
h1{
  font-size: 25px;
}
p{
  cursor: pointer;
  margin-left: 20px;
  font-size: 20px;

}
   }
    }
  }
}
.title h1:active{
      color: #f66e13;
    }
.layui-carousel-ind ul{
  bottom: 10px !important;
  }

</style>